<!--
 * @Description: 
 * @Author: zhanyinjia
 * @Date: 2023-05-17 09:42:07
 * @LastEditors: zhanyinjia
 * @LastEditTime: 2024-07-23 10:07:05
-->
<template>
  <div>
    <p>已选id：{{ includeIds }}</p>
    <p>排除id：{{ excludeIds }}</p>
    <el-table
      max-height="500"
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      show-summary
      row-key="id"
      :row-class-name="rowClassFn"
      @select="selectItem"
      @select-all="selectAll"
      :summary-method="getSummaries"
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column
        :reserve-selection="true"
        type="selection"
        width="120"
        class-name="zyj"
      > </el-table-column>
      <el-table-column
        label="日期"
        width="120"
      >
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="120"
      > </el-table-column>
      <el-table-column
        prop="pay"
        label="支付"
      > </el-table-column>
    </el-table>
    <pagination
      :pageNum="pagenum"
      :pageSize="5"
      :total="total"
      @goSpecifiedPage="pageChange"
    ></pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pagenum: 1,
      total: 150,
      tableData: [],
      list: [
        { id: 1, date: '2016-05-03', name: '王小虎1', pay: 1 },
        { id: 2, date: '2016-05-02', name: '王小虎2', pay: 2 },
        {
          id: 3,
          date: '2016-05-04',
          name: '王小虎3',
          pay: 3,
          children: [
            {
              id: 31,
              pid: 3,
              date: '2016-05-01',
              name: '王小虎32',
              pay: 31
            },
            {
              id: 32,
              pid: 3,
              date: '2016-05-01',
              name: '王小虎32',
              pay: 32
            }
          ]
        },
        { id: 4, date: '2016-05-01', name: '王小虎4', pay: 4 },
        { id: 5, date: '2016-05-08', name: '王小虎5', pay: 5 }
      ],
      isAll: false, //是否全选
      excludeIds: [], //全选时，单个去勾选要记录
      includeIds: [] //非全选时，单个勾选要记录
    }
  },
  created() {
    /* const longList = []
    for (let i = 1; i < 500; i++) {
      if (i % 100 == 0 && i / 100 > 0) {
        longList.push({
          id: i,
          date: '2016-05-04',
          name: '王小虎3',
          pay: i,
          children: [
            {
              id: `${i}1`,
              pid: i,
              date: '2016-05-01',
              name: `王小虎${i}2`,
              pay: `${i}1`
            },
            {
              id: `${i}2`,
              pid: i,
              date: '2016-05-01',
              name: `王小虎${i}2`,
              pay: `${i}1`
            }
          ]
        })
      } else {
        longList.push({
          id: i,
          date: '2016-05-03',
          name: `王小虎${i}`,
          pay: i
        })
      }
    } */
    this.tableData = this.list
  },
  methods: {
    rowClassFn({ row }) {
      console.log(row)
      if (row.pid) {
        return 'select-hidden'
      }
    },
    pageChange(num) {
      let arr = []
      if (num == 1) {
        arr = this.list
      } else {
        arr = []
        for (let i = 1; i < 6; i++) {
          arr.push({
            id: 5 * (num - 1) + i,
            date: '2016-05-03',
            name: `王小虎${5 * (num - 1) + i}`,
            pay: 5 * (num - 1) + i
          })
        }
      }

      this.tableData = arr

      if (this.isAll) {
        //已被全选
        this.tableData.forEach((row) => {
          const result = this.excludeIds.includes(row.id)
          this.$refs.multipleTable.toggleRowSelection(row, !result)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
        this.tableData.forEach((row) => {
          const result = this.includeIds.includes(row.id)
          this.$refs.multipleTable.toggleRowSelection(row, result)
        })
      }
    },
    selectItem(selection, row) {
      console.log('单选')
      if (this.isAll) {
        const pos = this.excludeIds.indexOf(row.id)
        if (pos > -1) {
          this.excludeIds.splice(pos, 1)
        } else {
          this.excludeIds.push(row.id)
        }
      } else {
        const pos = this.includeIds.indexOf(row.id)
        if (pos > -1) {
          this.includeIds.splice(pos, 1)
        } else {
          this.includeIds.push(row.id)
        }
      }
    },
    selectAll(selection) {
      console.log('全选')
      if (!this.isAll) {
        this.isAll = true
        this.includeIds = []
      } else {
        this.isAll = false
        this.$refs.multipleTable.clearSelection()
        this.excludeIds = []
      }
    },
    getSummaries(param) {
      console.log('合计')
      console.log(param)
      let num = 0,
        money = 0
      if (this.isAll) {
        num = this.total - this.excludeIds.length
        money = this.excludeIds.length ? `除${this.excludeIds}外所有数据总和` : '所有数据总和'
      } else {
        num = this.includeIds.length
        money = this.includeIds.reduce((prev, next) => {
          prev += next
          return prev
        }, 0)
      }

      return [`合计：已选${num}条`, '', '', money]
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .select-hidden .el-checkbox {
  display: none !important;
}
</style>